<html>
<head>
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/jquery.form.js"></script>
    <style>
        #img_to_show:hover {
            cursor: pointer;
        }

        /*鼠标放在图片上时,变成手状*/
    </style>
</head>
<body>
<form id="form1" action="/upload" method="post">
    <%--将enctype="multipart/form-data"去掉,在传参的时候,传的参数就比较简单,否则稍微复杂--%>
    username:<input name="username">
    <br>
    password:<input type="password" name="password">
    <br>
    <input name="photo" type="hidden">
    <%--目的:将图片的地址传入数据库,并且将这个input项隐藏--%>
    <br>
    photo:
    <input type="file" name="img" onchange="upload_img();" style="display: none">
    <%--style="display: none"写这句话表示这个input在页面中有,但是不会显示--%>
    <br>
    <img id="img_to_show" width="100px" height="100px" src="http://127.0.0.1:8088/img/3.jpg" onclick="select_img();">
    <br>
    <button>upload</button>
</form>
</body>
<script>
    function upload_img() {
        //$(表单).ajaxSubmit)();表单插件的语法,导完jquery-form包后的语法
        //1.异步上传图片
        $("#form1").ajaxSubmit({
            type: 'post',//上传方式
            url: '/upload',//上传图片的地址
            success: function (path) {//请求成功后的回调函数
                //2.获取上传后的图片路径
                //alert(path);
                // 3.修改img标签的src属性
                $("#img_to_show").prop("src", path);//将img标签的路径改为你上传图片的路径
                //4.修改图片的路径表单项的value
                $("input[name='photo']").val(path)
            }
        });
    }

    function select_img() {
        $("input[name='img']").click();//点击图片的时候,会触发上传图片的表单项
    }
</script>
</html>
